<template>
  <div class="app-container">
    <el-card>
      <OrderItemSteps :details="details" />
    </el-card>
    <el-card class="mt-20">
      <OrderItemPanel :details="details" @update="getOrderDetail" />
    </el-card>
    <el-card class="mt-20">
      <OrderItemInfo :details="details" />
    </el-card>
    <div class="text-center mt-20">
      <el-button @click="back">返回</el-button>
      <el-button v-if="showBtn" type="primary" @click="dialogVisible = !dialogVisible"
        >取消订单</el-button
      >
      <el-button
        type="primary"
        @click="addressVisible = !addressVisible"
        v-if="
          details &&
          details.orderStatus == 10 &&
          details.addressUpdateApplyResponse &&
          details.addressUpdateApplyResponse.status == 1
        "
        >修改地址</el-button
      >
    </div>

    <!-- 取消订单 -->
    <OrderCancelPopup
      v-if="dialogVisible"
      :dialogVisible.sync="dialogVisible"
      @update="getOrderDetail"
    />

    <!-- 修改地址 -->
    <OrderAddressPopup
      v-if="addressVisible"
      :id="details.addressUpdateApplyResponse.id"
      :addressVisible.sync="addressVisible"
      @update="getOrderDetail"
    />
  </div>
</template>

<script>
import OrderItemSteps from './components/OrderItemSteps'
import OrderItemPanel from './components/OrderItemPanel.vue'
import OrderItemInfo from './components/OrderItemInfo.vue'
import OrderCancelPopup from './components/OrderCancelPopup.vue'
import OrderAddressPopup from './components/OrderAddressPopup.vue'
export default {
  name: 'StoreDetail',
  components: {
    OrderItemSteps,
    OrderItemPanel,
    OrderItemInfo,
    OrderCancelPopup,
    OrderAddressPopup
  },
  data() {
    return {
      details: null,
      dialogVisible: false,
      addressVisible: false
    }
  },
  computed: {
    showBtn() {
      return (
        !(this.details?.orderStatus === 31 && this.details?.finishFlag) &&
        this.details?.orderStatus !== -1
      )
    }
  },
  created() {
    this.getOrderDetail()
  },
  methods: {
    async getOrderDetail() {
      const orderNo = this.$route.query.orderNo
      const { data } = await this.$http.order.orderApi.getOrderDetail(orderNo)
      this.details = data
    },
    back() {
      this.$router.back(-1)
    }
  }
}
</script>
